<template>
  <div class="dialog">
    <el-dialog title="佣金提取" :visible.sync="dialogVisible">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formData"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="formItem">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="佣金总额" prop="totalAmount">
            <el-input v-model="formData.totalAmount" :disabled="true"></el-input>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="提取金额" prop="amount">
            <el-input v-model="formData.amount" type="number" :disabled="disableInput"></el-input>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="支付方式" prop="payType">
            <el-radio v-model="formData.payType" label="1">微信</el-radio>
            <el-radio v-model="formData.payType" label="2">银行</el-radio>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="微信号" prop="wexinNo">
            <el-input v-model="formData.wexinNo" :disabled="disableInput"></el-input>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="银行账号" prop="bankNo">
            <el-input v-model="formData.bankNo" :disabled="disableInput"></el-input>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="开户银行" prop="bankName">
            <el-input v-model="formData.bankName" :disabled="disableInput"></el-input>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="卡持有人" prop="bankCardOwer">
            <el-input v-model="formData.bankCardOwer" :disabled="disableInput"></el-input>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="交易流水号" prop="transctionNo">
            <el-input v-model="formData.transctionNo" :disabled="disableInput"></el-input>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="付款人" prop="payerName">
            <el-input v-model="formData.payerName" :disabled="disableInput"></el-input>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="状态" prop="status">
            <el-select v-model="formData.status" placeholder="请选择">
              <el-option :key="1" label="未付款" :value="1"></el-option>
              <el-option :key="2" label="已付款" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item label="付款日期" prop="payDate">
            <el-date-picker
              style="flex: 1;"
              v-model="formData.payDate"
              type="datetime"
              value-format="yyyy-MM-dd hh:mm:ss"
              placeholder="选择日期时间"
              :disabled="disableInput"
            ></el-date-picker>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button v-if="!disableInput" type="primary" @click="submitForm()">确定</el-button>
          <el-button @click="cancelClick()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // id即编辑的id，visible属性用来监听是否显示弹窗
  props: ["id", "visible"],
  components: {},
  watch: {},
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      }
    },
  },
  data() {
    return {
      rules: {
        amount: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback("提取不能为空");
                return;
              }
              if (value > this.formData.totalAmount) {
                callback("提取不能大于总额");
                return;
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      },
      formData: {
        id: "",
        name: null,
        totalAmount: null,
        amount: null,
        payType: null,
        wexinNo: null,
        bankNo: null,
        bankName: null,
        bankCardOwer: null,
        transctionNo: null,
        status: null,
        payDate: null,
        doctorId: null,
        customerId: null,
        payerName: null
      },
      loading: false,
      type: "",
      disableInput:false,
    };
  },
  methods: {
    // 确认保存
    submitForm() {
      let param = { ...this.formData };
      this.$refs.formData.validate(valid => {
        if (valid) {
          let url = "doctor/saveDrawCashInfo";
          if (this.type === "drawCash") {
            url = "finance/saveDrawCashInfo";
          } else if (this.type === "distribute") {
            url = "agent/saveDrawCashInfo";
          }
          this.$https.postXform(url, param).then(res => {
            this.$message({ message: "操作成功", type: "success" });
            this.dialogVisible = false;
            this.$emit("success");
          });
        } else {
          return false;
        }
      });
    },
    cancelClick() {
      this.dialogVisible = false;
    },
    initEdit(id, type) {
      if (id) {
        this.type = type;
        let url = "doctor/getDrawCashInfo";
        if (type === "drawCash") {
          url = "finance/getDrawCashInfo";
        } else if (type === "distribute") {
          url = "agent/getDrawCashInfo";
        }
        this.$https.get(url, { id: id }).then(res => {
          this.formData = {
            id: res.data.data.id,
            name: res.data.data.name,
            totalAmount: res.data.data.totalAmount,
            amount: res.data.data.amount,
            payType: res.data.data.payType,
            wexinNo: res.data.data.wexinNo,
            bankNo: res.data.data.bankNo,
            bankName: res.data.data.bankName,
            bankCardOwer: res.data.data.bankCardOwer,
            transctionNo: res.data.data.transctionNo,
            status: res.data.data.status,
            payDate: res.data.data.payDate,
            doctorId: res.data.data.doctorId,
            customerId: res.data.data.customerId,
            payerName: res.data.data.payerName
          };
          this.disableInput=this.formData.status === 2;
        });
      }
    }
  },
  mounted() {},
  created() {}
};
</script>

<style lang="less">
</style>
